<template>
  <div class="page-content">
    <el-container>
      <el-aside width="300px" direction="vertical" style="border-right: 1px #ccc solid;">
        <slot name="default">
          <el-row>
            <el-col :span="18">
              <span style="font-size: 16px">配置项</span>
            </el-col>
            <el-col :span="6" style="text-align: right; padding-right: 5px;">
              <el-button icon="Plus" type="primary" plain  @click="handleAdd">
            </el-col>
          </el-row>
        </slot>
        <div style="height: 5px;"></div>
        <el-table :data="tableData"
                  :show-header="false"
                  highlight-current-row
                  :empty-text="'没有数据'"
                  :stripe="false"
                  :row-key="'code'"
                  :current-row-key="currentRow.code"
                  @current-change="handleCurrentChange">
          <el-table-column prop="code" label="Date"/>
          <el-table-column prop="name" label="Name"/>
        </el-table>
      </el-aside>
      <el-main>
        <div class="main" style="width: 800px;">
        <h1>
          <el-row>
            <el-col :span="16">
              {{currentRow.name}}({{currentRow.code}})
            </el-col>
            <el-col :span="8" style="text-align: right">
              <el-button  type="primary" plain  @click="handleEdit(currentRow)">编辑</el-button>
              <el-button  type="primary" plain  @click="handleRemove(currentRow)">删除</el-button>
            </el-col>
          </el-row>
        </h1>
        <el-form :model="currentRow" label-width="100px">
          <template v-for="item in currentRow.items">
          <el-form-item :label="item.name">
            <el-input v-if="item.multiline" rows="8" type="textarea" v-model="currentRow.params[`${item.code}`]"/>
            <el-input v-else v-model="currentRow.params[`${item.code}`]"/>
          </el-form-item>
          </template>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handSave">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
        </el-form>
        </div>
      </el-main>
    </el-container>


      <dwin ref="dialog" :width="600" :url="'/view/sysconfig/edit.vue'" :title="'新增/编辑设备配置'" @onclose="handleClose"></dwin>
  </div>
</template>
<script>
import Dwin from "../../component/dwin.vue";
import Pagination from "../../component/pagination.vue";
import {list,remove,edit} from '/http/sysconfig.js'
import WeekPlan from "../../component/weekPlan.vue";
export default {
  components: {WeekPlan, Dwin,Pagination},
  setup(props,context) {
    const tableData = ref([]);
    const dialog = ref(null);
    const currentRow = ref({})

    const getList=()=>{
      list().then(res=>{
        tableData.value = res.data.data;
        if(tableData.value&&tableData.value.length>0){
          currentRow.value = tableData.value[0]
        }
      })
    }
    const handleAdd = () => {
      dialog.value.open();
    }

    const handleEdit = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeEdit(rows,()=>{
        dialog.value.open(rows.value[0]);
      })
    }

    const handleRemove = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeRemove(rows,()=>{
        remove(rows.value.map((item) => item.code).join()).then(res=>{
          if(response(res)){
            getList();
          }
        })
      });
    }

    const handSave = ()=>{
      edit(currentRow.value).then(res=> {
        response(res,context)
      });
    }

    const handleClose = (refresh)=>{
      if(refresh){
        getList();
      }
    }

    const handleCurrentChange = (val) => {
      currentRow.value = val
    }


    getList();
    return {handleAdd,
      dialog,
      tableData,
      getList,
      handleClose,currentRow,handleEdit,handleRemove,handSave,handleCurrentChange};
  }
}
</script>
<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
div.main {
  padding: 10px;
}

h1 {
  font-size: 20px;
  border: #eee solid 1px;
  padding: 10px 0 10px 10px;
}
</style>